<template>
  <div class="edit-column-model edit-column-modelcs" id="editColumnModel">
    <div class="edit-header">
      <span class="mode-text">{{ route.query.id ? '栏目模型：' + route.query.name : '会员模型' }}</span>
      <a-button :disabled="!btnPerm.includes('saveAble')" @click="saveColumnModel" style="width: 60px" type="primary">
        保存
      </a-button>
    </div>

    <div class="main">
      <div class="left-box">
        <a-collapse v-model:activeKey="activeKey" :bordered="false" v-for="(item, index) in optionsObj.componentList"
          :key="index">
          <template #expandIcon="{ isActive }">
            <i v-if="!isActive" class="iconfont icon-caret-right"
              style="font-size: 24px;color: #000000;height: 24px;display: flex;flex-direction: row;align-items: center;" />
            <i v-else class="iconfont icon-caret-down"
              style="font-size: 24px;color: #000000;height: 24px;display: flex;flex-direction: row;align-items: center;" />
          </template>
          <a-collapse-panel :key="index" :header="item.header" :style="{
            background: '#fff',
            'margin-top': '24px',
            border: 'none',
            overflow: 'hidden',
          }">
            <draggable :list="item.list" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true"
              chosen-class="chosenClass" animation="300" @start="onStartLeft" @end="onEndLeft" :group="options.group"
              :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50"
              :move="onMoveLeft" :sort="false" class="drag-box">
              <template #item="{ element }">
                <div class="comp-item move" :class="element.column ? 'column-system' : ''">
                  <i class="iconfont drag-icon" :class="element.icon" style="font-size: 16.5px">
                  </i>
                  <div class="text">{{ element.name }}</div>
                </div>
              </template>
            </draggable>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <div class="middle-box">
        <a-tabs v-model:activeKey="tabKey" @change="changeTopTabs" style="margin-left: 24px;margin-right: 24px;"
          v-if="route.query.id">
          <a-tab-pane :key="1" tab="基本设置">
          </a-tab-pane>
          <a-tab-pane :key="2" tab="扩展设置">
          </a-tab-pane>
          <a-tab-pane :key="3" tab="SEO设置">
          </a-tab-pane>
        </a-tabs>
        <div style="height: calc(100% - 150px);overflow: auto;" class="dragContent">
          <a-form v-if="tabKey === 1" autoComplete="off" :label-col='getWidth(arr1)'>
            <draggable :list="arr1" :class="'draggable-content'" ghost-class="edit-ghost" handle=".edit" filter=".forbid"
              :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart" @end=""
              group="itxst" :fallback-class="true" dragClass="dragClass" :fallback-on-body="true"
              :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove">
              <template #item="{ element, index }">
                <div class="edit-item edit" @click="selectedComp(element)"
                  :class="activeCompId == element.id ? 'activeComp' : ''">
                  <div class="z-preview" :class="!excludeName(element) ? 'isdisabled-item' : ''">
                    <component :is="comps[element.componentName]" :element="element" v-if="element.formSetting"
                      :ref="(el: any) => setItemRef(el, element.componentName)" :key="element">
                    </component>
                  </div>
                  <!-- v-if="excludeName(element)" -->
                  <div class="copy-delete" v-if="excludeName(element)">
                    <i class="iconfont" @click="deleteItem(element, index)" style="font-size: 16px;margin-left:0">&#xe8e2;
                    </i>
                  </div>
                </div>
              </template>
            </draggable>
          </a-form>
          <a-form v-if="tabKey === 2" :label-col='getWidth(arr2)' autoComplete="off">
            <draggable :list="arr2" :class="'draggable-content'" ghost-class="edit-ghost" handle=".edit" filter=".forbid"
              :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart" @end="onEnd"
              group="itxst" :fallback-class="true" dragClass="dragClass" :fallback-on-body="true"
              :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove" style="min-height: 700px">
              <template #item="{ element, index }">
                <div class="edit-item edit" @click="selectedComp(element)"
                  :class="activeCompId == element.id ? 'activeComp' : ''">
                  <div class="z-preview">
                    <component :is="comps[element.componentName]" :element="element" v-if="element.formSetting"
                      :key="element">
                    </component>
                  </div>
                  <div class="copy-delete" v-if="excludeName(element)">
                    <i class="iconfont" @click="deleteItem(element, index)" style="font-size: 16px;margin-left:0">&#xe8e2;
                    </i>
                  </div>
                </div>
              </template>
            </draggable>
          </a-form>
          <a-form v-if="tabKey === 3" :label-col='getWidth(arr3)' autoComplete="off">
            <draggable :class="'draggable-content'" :list="arr3" ghost-class="edit-ghost" handle=".edit" filter=".forbid"
              :force-fallback="true" chosen-class="edit-chosenClass" animation="300" @start="onStart" @end="onEnd"
              group="itxst" :fallback-class="true" dragClass="dragClass" :fallback-on-body="true"
              :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove" style="min-height: 700px">
              <template #item="{ element, index }">
                <div class="edit-item edit" @click="selectedComp(element)"
                  :class="activeCompId == element.id ? 'activeComp' : ''">
                  <div class="z-preview">
                    <component :is="comps[element.componentName]" :element="element" v-if="element.formSetting"
                      :key="element">
                    </component>
                  </div>
                  <div class="copy-delete" v-if="excludeName(element)">
                    <i class="iconfont" @click="deleteItem(element, index)" style="font-size: 16px;margin-left:0">&#xe8e2;
                    </i>
                  </div>
                </div>
              </template>
            </draggable>
          </a-form>
        </div>
        <div class="tip-model" v-if="isShowTip">
          <!-- <i class="iconfont icon-click"
            style="font-size: 20px;color: rgba(0,0,0,0.85);height: 20px;margin-right: 12px;display: flex;flex-direction: row;align-items: center;" />
          点击左侧组件<span style="margin-left: 12px;">或</span> -->
          <i class="iconfont icon-drag"
            style="font-size: 20px;color: rgba(0,0,0,0.85);margin: 0 12px;height: 20px;display: flex;flex-direction: row;align-items: center;" />
          拖拽组件到该区域
        </div>
      </div>
      <div class="right-box">
        <div class="attr-setting">组件属性设置</div>
        <div class="settings-comp">
          <component :is="comps[settingName]" :currentComp="currentComp" v-if="currentComp && currentComp.id">
          </component>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, computed, ComputedRef, watch } from "vue";

import {
  comps,
  configSetting,
  formConfigSetting,
} from "@/components/draggable/exportComp";
import draggable from "vuedraggable";
import { Modal, message } from "ant-design-vue";
import { randomWord } from '@/utils/common'
import request from "@/api/index";
import { dataSourceType } from "@/type";
import { useRoute } from "vue-router";
import { cloneDeep, isArray } from "lodash";
import dayjs from 'dayjs';
import { routerPerm } from '@/utils/common';
const route = useRoute();
console.log(comps, 'comps')
//props
const props = defineProps({
  options: {
    type: Object,
    default: {} as dataSourceType,
  },
  detailData: {
    type: Array,
    default: []
  },
  modelType: {
    type: String,
    default: ''
  }
});


//data
const btnPerm = ref<any[]>([]);
//头部切换选项

const arr1 = ref<any[]>([]);
arr1.value = props.modelType === 'newVip' ? [
  { componentName: "userName", isDeleteAble: true, uniqe: true },
  { componentName: "phone", isDeleteAble: true, uniqe: true },
  { componentName: "password", isDeleteAble: true, uniqe: true },
  { componentName: "memberStatus", isDeleteAble: true, uniqe: true },
] : [
  { componentName: "parentColumn", isDeleteAble: true, uniqe: true },
  { componentName: "columnName", isDeleteAble: true, uniqe: true },
  { componentName: "accessPath", isDeleteAble: true, uniqe: true },
]
const arr2 = ref<dataSourceType[]>([]);
const arr3 = ref<dataSourceType[]>([]);

const isMoving = ref(false);
const update = ref<string>('');
let isShowTip = ref<any>()
const formListBase = ref<dataSourceType[]>([])
const formListExtend = ref<dataSourceType[]>([])
const formListSeo = ref<dataSourceType[]>([])
let saveData = reactive<any>({
  formListBase: [],
  formListExtend: [],
  formListSeo: [],
});
const optionsObj = reactive(props.options);
const activeKey = ref([]);
const tabKey = ref<number>(1);
const memberModelId = ref<number | null>(null);
const settingName = ref<string>("");
const activeCompId = ref<string | number>("");
const currentComp = ref<dataSourceType>({});
const itemRefs = ref<dataSourceType>({});
const setItemRef = (el: any, name: any) => {
  if (el) {
    itemRefs.value[name] = el;
  }
  // if (name == 'parentColumn') {
  //   console.log(itemRefs.value.parentColumn.text(), 'parentColumn');
  // }
}

//添加id
const addId = () => {
  arr2.value.length && arr2.value.forEach((item: any) => { item.id = randomWord(false, 3, 3); })
  arr3.value.length && arr3.value.forEach((item: any) => { item.id = randomWord(false, 3, 3); })
  setFormSettings();
  optionsObj.componentList.forEach((item: dataSourceType) => {
    item.list.forEach((listItem: dataSourceType) => {
      listItem.id = randomWord(false, 3, 3);
    })
  })
}
// 

//method
//当前电机组件及组件设置信息传递
const selectedComp = (e: any) => {
  currentComp.value = {};
  settingName.value = '';
  let arr = [];
  if (tabKey.value === 1) {
    arr = arr1.value;
  } else if (tabKey.value === 2) {
    arr = arr2.value;
  } else {
    arr = arr3.value;
  }
  currentComp.value = arr.find((item: dataSourceType) => {
    return item.id === e.id
  })
  console.log(currentComp.value, 'currentComp.value')
  activeCompId.value = e.id;
  settingName.value = `${e.componentName}Settings`;
};

////左侧栏拖拽开始的事件
const onStartLeft = (e: any) => { };

//左侧栏拖拽结束的事件
const onEndLeft = (e: any) => {
  if (isMoving.value) {
    isMoving.value = false
    message.error('组件已存在！')
  } else {
    setFormSettings();
  }
};
const setFormSettings = () => {
  let arr: dataSourceType[] = [];
  if (tabKey.value === 1) {
    arr = cloneDeep(arr1.value);
  } else if (tabKey.value === 2) {
    arr = cloneDeep(arr2.value);
  } else {
    arr = cloneDeep(arr3.value);
  }
  arr.forEach((item: dataSourceType, index: number) => {
    // console.log(item, 'item')
    if (!item.formSetting || item.formSetting?.id.length <= 3) {
      let params = randomWord(false, 4, 4);
      item.id = params;
      item.param = item.uniqe || item.isDeleteAble ? item.componentName : item.componentName + params;

      configSetting.forEach((comp: dataSourceType,) => {
        if (comp.param === item.componentName) {
          arr[index] = Object.assign(cloneDeep(comp), item);
        }
      });
      arr[index].formSetting = JSON.parse(JSON.stringify((formConfigSetting.find((comp: dataSourceType) => {
        comp.children[1].value = item.uniqe || item.isDeleteAble ? item.componentName : item.componentName + params;
        return (comp && comp.type === `${item.componentName}Settings` && (comp.id = item.id));
      }))));
    }
  })

  if (tabKey.value == 1) {
    saveData.formListBase = arr1.value = cloneDeep(arr);
  } else if (tabKey.value == 2) {

    arr2.value = cloneDeep(arr);
  } else {
    arr3.value = cloneDeep(arr);
  }
  nextTick(() => {
    saveData.formListExtend = arr2.value;
    saveData.formListSeo = arr3.value;
  })
}

const onMoveLeft = (e: any) => {
  let result = true;
  const index = activeKey.value[0];
  if (Number(index) === 1) {
    let arr = [...arr1.value, ...arr2.value, ...arr3.value];
    const element = e.draggedContext.element;
    if (arr.findIndex((item) => (element.uniqe == 1) && (item.componentName == element.componentName)) !== -1) {
      isMoving.value = true
      result = false;
    }
  } else {
    isMoving.value = false
    result = true;
  }
  return result;
};

const onStart = (e: any) => {
  console.log(e, "开始拖拽");
};
//拖拽结束的事件
const onEnd = (e: any) => {
};
const onMove = (e: any, item: any) => {
};

//改变头部tab切换
const changeTopTabs = (activeKey: number) => {
  tabKey.value = activeKey;
  currentComp.value = {};
  settingName.value = '';
  activeCompId.value = '';
};

//复制组件
const copyItem = () => {
}

//排除固定的选项
const excludeName = (data: dataSourceType) => {
  if (!data.isDeleteAble) {
    return true
  } else {
    return false
  }
}

//删除组件
const deleteItem = (data: dataSourceType, index: number) => {
  let arr = [];
  if (tabKey.value === 1) {
    arr = cloneDeep(arr1.value);
  } else if (tabKey.value === 2) {
    arr = cloneDeep(arr2.value);
  } else {
    arr = cloneDeep(arr3.value);
  }
  if (data.id == activeCompId.value) { // 如果删除的是选中的，则清空设置项
    currentComp.value = {};
    settingName.value = '';
  }
  arr.splice(index, 1);
  if (tabKey.value === 1) {
    saveData.formListBase = arr1.value = cloneDeep(arr);
  } else if (tabKey.value === 2) {
    arr2.value = cloneDeep(arr);
  } else {
    arr3.value = cloneDeep(arr);
  }
  nextTick(() => {
    saveData.formListExtend = arr2.value;
    saveData.formListSeo = arr3.value;
  })

}

//保存模型组件
const saveColumnModel = () => {
  
  if(saveData.formListBase && saveData.formListBase.length) {
    saveData.formListBase.forEach((item: any) => {
      if(item.componentName === 'userName' || item.componentName === 'password') {
        item.rule.required = true
        item.value = null
      }
      if(isArray(item.formSetting.children[item.formSetting.children.length - 1].value) ) {
        item.scene = item.formSetting.children[item.formSetting.children.length - 1].value;
      }
    })
  }
  console.log(saveData, 'saveData')
  
  const params = {
    enableJson: JSON.stringify(route.query.id ? saveData : saveData.formListBase, function (key: any, val: any) {
      if (typeof val === 'function') {
        return val + '';
      }
      return val;
    }),
    modelId: route.query.id ? route.query.id : memberModelId.value,
  };
  request[(route.query.id || memberModelId.value) ? 'fetchModelItemUpdate' : 'fetchModelItemSava'](params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        // getDetail()
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//获取详情
const getDetail = async () => {
  let deleteAbles1 = ["parentColumn", "columnName", "accessPath", 'tplMobile', 'tplPc', 'contentModelTpls',]
  let deleteAbles2 = ["userName", "phone", "password", "memberStatus", "headImage", "nickName", ]
  let params = {
    id: route.query.id
  };
  const data = await request[route.query.id ? 'fetchColumnModelDetail' : 'fetchModelMemberModel'](params);
  memberModelId.value = data.id
  const realData = JSON.parse(data.enableJson) || []
  if (!route.query.id) {// 说明是会员组件
    formListBase.value = JSON.parse(data.enableJson) || [];
    if (!formListBase.value.length) {
      arr1.value = [
        { componentName: "headImage", isDeleteAble: true, uniqe: true },
        { componentName: "nickName", isDeleteAble: true, uniqe: true },
        { componentName: "userName", isDeleteAble: true, uniqe: true },
        { componentName: "password", isDeleteAble: true, uniqe: true },
        { componentName: "phone", isDeleteAble: true, uniqe: true },
        { componentName: "email", isDeleteAble: true, uniqe: true },
        { componentName: "memberStatus", isDeleteAble: true, uniqe: true },
      ]
    }

    formListBase.value.length && formListBase.value.forEach((item: dataSourceType) => {
      if (item.param.includes('dateTime') && item.value) {
        item.value = dayjs(item.value);
      }
      if (deleteAbles2.includes(item.componentName)) {
        item.isDeleteAble = true;
      }
      arr1.value.push(item);

    })
    if (formListBase.value.length) {
      arr1.value = formListBase.value;
    }
    addId()
    return
  }
  if (realData?.formListBase.length) {
    formListBase.value = JSON.parse(data.enableJson).formListBase;
    arr1.value = []
  }
  if (realData?.formListExtend.length) {
    formListExtend.value = JSON.parse(data.enableJson).formListExtend;
    arr2.value = [];
  }
  if (realData?.formListSeo.length) {
    formListSeo.value = JSON.parse(data.enableJson).formListSeo;
    arr3.value = [];
  }

  formListBase.value.forEach((item: dataSourceType) => {
    if (item.param.includes('dateTime') && item.value) {
      item.value = dayjs(item.value);
    }
    let data: any = { ...item, isDeleteAble: deleteAbles1.includes(item.param) }

    arr1.value.push(data)
  })

  formListExtend.value.forEach((item: dataSourceType) => {
    if (item.param.includes('dateTime') && item.value) {
      item.value = dayjs(item.value);
    }
    let data: any = { ...item, isDeleteAble: deleteAbles1.includes(item.param) }
    arr2.value.push(data)
  })

  formListSeo.value.forEach((item: dataSourceType) => {
    if (item.param.includes('dateTime') && item.value) {
      item.value = dayjs(item.value);
    }
    let data: any = { ...item, isDeleteAble: deleteAbles1.includes(item.param) }
    arr3.value.push(data)
  })
  addId();

}
//获取最大的label的宽度
const getWidth = (data: any) => {
  let labelLength: any[] = [];
  data.forEach((c_item: any) => {
    labelLength.push(c_item.label?.length || 0);
  })
  let maxLength = Math.max(...labelLength);
  return { 'style': { 'width': (maxLength + 1) * 14 + 'px' } };
}
//onMounted
onMounted(() => {
  btnPerm.value = routerPerm()
  getDetail()
})

//computed

isShowTip = computed(() => {
  return ((arr1.value.length <= 3 && tabKey.value === 1) || (!arr2.value.length && tabKey.value === 2) || (!arr3.value.length && tabKey.value === 3))
})
</script>

<style lang="less" scoped>
.ant-form-horizontal .ant-form-item-control {
  flex: unset;
}

.edit-column-model {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow-y: hidden;

  .edit-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .mode-text {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 14px;
    }
  }

  .main {
    height: calc(100% + 54px);
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    // 禁止文字被鼠标选中 
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .left-box {
      height: calc(100% - 100px);
      overflow-y: auto;
      width: 248px;
      border-right: 1px solid rgba(0, 0, 0, 0.06);

      .drag-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .comp-item {
          margin-top: 12px;
          border-radius: 2px;
          border: 1px solid rgba(0, 0, 0, 0.15);
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 106px;
          padding-left: 12px;

          .text {
            margin-left: 8px;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.85);
            line-height: 14px;
          }
        }

        .column-system {
          width: 224px;
        }

        .comp-item:hover {
          border: 1px dashed #1f6ded;
          cursor: move;

          .text {
            color: #1f6ded;
          }

          .drag-icon {
            color: #1f6ded;
          }
        }
      }
    }

    .middle-box {
      height: calc(100%);
      overflow: auto;
      flex: 1;
      min-width: 536px;
      padding: 12px 0px 0;
      position: relative;

      .dragContent {
        // padding: 0 24px;
        // box-sizing: border-box;
      }

      .tip-model {
        position: absolute;
        top: 310px;
        left: 0px;
        width: 100%;
        height: 30px;
        border-radius: 2px;
        opacity: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .draggable-content {
        height: calc(100%);
      }

      .isdisabled-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 901;
      }

      .edit-item {
        text-align: left;
        background-color: #fff;
        display: flex;
        user-select: none;
        position: relative;

        .item-delete {
          position: absolute;
          font-size: 25px;
        }
      }

      .edit-item:first-child {
        margin-top: 12px;

      }

      .edit-item:hover {
        cursor: move;
        position: relative;
        background-color: #fafafa;

        &::before {

          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          content: '';
          z-index: 903;
        }

        .z-preview {

          height: 100%;
          width: 100%;
          position: relative;
        }

        .copy-delete {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .edit-item:active {
        cursor: move;
        position: relative;

        .z-preview {
          background-color: #edf7ff;
          height: 100%;
          width: 100%;
          position: relative;
        }
      }

      .z-preview {
        padding: 12px 0;
        position: relative;
        width: 100%;


      }

      .copy-delete {
        position: absolute;
        right: 4px;
        top: 4px;
        width: 24px;
        height: 24px;
        padding: 0 8px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
        border-radius: 50px;
        z-index: 1010;
        cursor: pointer;
        display: none;

        .iconfont {
          line-height: 16px;
          color: rgba(0, 0, 0, 0.45);
        }

        span {
          height: 14px;
          border: 1px solid rgba(0, 0, 0, 0.06);
        }
      }

      .edit-item>label {
        padding: 6px 10px;
        color: #333;
      }

      .edit-item>label:hover {
        cursor: move;
      }

      .edit-item>span {
        padding: 6px 10px;
        color: #666;
      }
    }

    .right-box {
      height: calc(100% - 100px);
      overflow-y: auto;
      width: 352px;
      padding-top: 24px;
      padding-left: 24px;
      border-left: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
    }
  }
}

::v-deep(.ant-form-item) {
  margin-bottom: 0;

  .ant-select {
    width: 304px;
  }
}

::v-deep(.ant-form-item-label) {
  width: 168px;
}

::v-deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  padding: 0;
}

::v-deep(.ant-collapse-content > .ant-collapse-content-box) {
  padding: 0 24px 0 0;
}

::v-deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
  margin-right: 0px;
}

::v-deep(.ant-input:placeholder-shown) {
  // width: 304px;
}

.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  width: 32%;
  margin-right: 20px;
}

.chosenClass {
  height: max-content;
  width: max-content;
  display: flex;
  border: 1px solid #1ec6df;
}

.edit-chosenClass {
  opacity: 1;
  width: 100%;
  //height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  list-style: none;
  font-size: 0;
  border-width: 0px !important;
}

.edit-column-model .main .middle-box .edit-ghost {
  width: 100%;
  height: 40px;
  background-color: #edf7ff !important;
  position: relative;
  line-height: 60px;
  list-style: none;
  font-size: 0;
  opacity: 1;
  border-width: 0 !important;
  z-index: 20;
  overflow: hidden;

  .z-preview,
  div,
  span,
  i {
    // 拖拽过程中，底层元素都不可见
    display: none;
  }

  &:after {
    display: block;
    position: absolute;
    content: "";
    left: 50%;
    top: 0px;
    transform: translate(-50%, -0%);
    width: 100%;
    height: 20px;
    opacity: 1;
    background-color: #edf7ff !important;
    border-bottom: 1px dashed #1f6ded;
    z-index: 2;
  }

  &:before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #edf7ff;
    content: "点击左侧字段并拖拽字段到此区域";
    left: 50%;
    top: 50%;
    height: 25px;
    padding: 0 30px;
    line-height: 25px;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    color: #1f6ded;
    z-index: 3;
    font-size: 14px;
  }
}

.dragClass {
  background-color: #edf7ff;
  height: max-content !important;
  padding: 12px 0;
}

.activeComp {
  background-color: #EDF7FF !important;
  width: 100% !important;
  position: relative;
  z-index: 902;

  .copy-delete {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="less">
.edit-column-model {
  .ant-form-item-control-input {

    .ant-select,
    .ant-input-affix-wrapper {
      width: 304px;
    }

    .editor-container {
      width: 75%;
    }
  }
}
</style>